<!--
 * @Author: gaotang
 * @Date: 2025年01月03日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2025-01-03 18:37:57
-->
<template>
  <div class="page-warp">
    <ItemWrap4 title="园区活跃度" style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <!-- :style="type === 'Center'?'width: 387px;':'width: 341px;'" -->
      <TopLeft style="margin-top: 0px" @chartClick="chartClick0" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '进出车次'" style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <TopCenter style="margin-top: -12px" @chartClick="chartClick1" />
    </ItemWrap4>
    <ItemWrap4 v-if="type === 'Center' || type === 'LeftRight' || type === 'RightLeft'" :title="mapTitle + '货量规模'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <TopRight style="margin-top: -20px" @chartClick="chartClick2" />
    </ItemWrap4>
    <ItemWrap4 v-if="type === 'Center' || type === 'LeftRight' || type === 'RightLeft'" :title="mapTitle + '客户发货量'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <BottomLeft style="margin-top: 0px" @chartClick="chartClick3" />
    </ItemWrap4>
    <ItemWrap4 v-if="type === 'Center'" :title="mapTitle + '专线发货货量'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <BottomCenter @chartClick="chartClick4" />
    </ItemWrap4>
    <ItemWrap4 v-if="type === 'Center'" :title="mapTitle + '线路数量'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <BottomRight style="margin-top: -12px" @chartClick="chartClick5" />
    </ItemWrap4>

  </div>
</template>

<script>
import TopLeft from './top-left.vue';
import TopCenter from './top-center.vue';
import TopRight from './top-right.vue';

import BottomLeft from './bottom-left.vue';
import BottomCenter from './bottom-center.vue';
import BottomRight from './bottom-right.vue';

export default {
  name: 'ACenter',
  components: {
    TopLeft,
    TopCenter,
    TopRight,
    BottomLeft,
    BottomCenter,
    BottomRight,
  },
  props: {
    type: {
      type: String,
      default: 'Center',
    }
  },
  data() {
    return {
      mapTitle: '大集物流港'
    };
  },
  methods: {
    chartClick0(params) {
      this.mapTitle = `${params.name}`;
      this.chartClick('ACenterTopLeft', params);
    },
    chartClick1(params) {
      this.chartClick('ACenterTopCenter', params);
    },
    chartClick2(params) {
      this.chartClick('ACenterTopRight', params);
    },
    chartClick3(params) {
      this.chartClick('ACenterBottomLeft', params);
    },
    chartClick4(params) {
      this.chartClick('ACenterBottomCenter', params);
    },
    chartClick5(params) {
      this.chartClick('ACenterBottomRight', params);
    },
    chartClick(name, params) {
      this.$emit('chartClick', { name, type: this.type, options: params });
    },
    // chartClick(params) {
    //   // console.log('点击的数据:', params);
    //   this.isMapClick = true;
    //   const { name, event } = params;
    //   this.mapTitle = `${name}`;
    //   // this.offsetX = event.offsetX + 10 + 'px';
    //   // this.offsetY = event.offsetY + 40 + 'px';

    //   // this.showData = true; 
    // }
  },
};
</script>

<style lang="scss" scoped>
.page-warp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  // margin: auto 16px;
  // border: 1px solid red;
}
</style>
